<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<h:head>
	<meta charset="utf-8" />
	<title>#{messages.appTitle}</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="description" content="Gestión Neonatal" />
	<meta name="author" content="Jorge E. Villaverde" />

	<h:outputStylesheet name="bootstrap.css" library="css" />
	<style type="text/css">
		body {
			padding-top: 60px;
			padding-bottom: 40px;
		}
	</style>
	<h:outputStylesheet name="bootstrap-responsive.css" library="css" />

	<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
	<!--[if lt IE 9]>
	      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	    <![endif]-->

	<!-- Le fav and touch icons -->
	<link rel="shortcut icon" href="#{request.contextPath}/resources/ico/favicon.ico" />
</h:head>
<h:body>
	<div class="navbar navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container">
				<a class="btn btn-navbar" data-toggle="collapse"
					data-target=".nav-collapse"> <span class="icon-bar"></span> <span
					class="icon-bar"></span> <span class="icon-bar"></span> </a> <a
					class="brand" href="#">#{messages.appName}</a>
				<div class="nav-collapse">
					<ul class="nav">
						<li class="active"><a href="#">#{messages.homeText}</a></li>
						<li><h:link outcome="/about.xhtml" value="#{messages.aboutText}"/></li>
						<li><h:link outcome="/contacto.xhtml" value="#{messages.contactText}"/></li>
					</ul>
				</div>
				<!--/.nav-collapse -->
			</div>
		</div>
	</div>

	<div class="container">

		<!-- Main hero unit for a primary marketing message or call to action -->
		<div class="hero-unit">
			<h1>#{messages.wellcomeTitleMessage}</h1>
			<p>#{messages.wellcomeDescripcionMessage}</p>
		</div>
		<div class="row">
			<div class="span12">
 				<h:form styleClass="well">
					<c:if test="#{homeBean.authenticationError}">
					<div class="alert alert-error">
              			<button type="button" class="close" data-dismiss="alert">&#215;</button>
              			<strong>Error de Autenticación</strong> Nombre de usuario o password inválido.
            		</div>
					</c:if>
					<!-- username -->					
				    <div class="control-group">
				    	<h:outputLabel styleClass="control-label" for="username" value="#{messages.username}" />
				    	<div class="controls">
		 					<h:inputText name="username" id="username" value="#{homeBean.username}" autocomplete="off" />
				    	</div>
				    </div>
				    <!-- password -->					
				    <div class="control-group">
				    	<h:outputLabel styleClass="control-label" for="password" value="#{messages.password}" />
				    	<div class="controls">
				    		<h:inputSecret name="password" id="password" value="#{homeBean.password}" autocomplete="off" />
				    	</div>
				    </div>
					<!-- form actions -->					 				
				    <div class="control-group">
				    	<div class="controls">
				    		<label class="checkbox">
				    			<h:selectBooleanCheckbox value="#{homeBean.rememberMe}" />
				    			<h:outputText value="#{messages.rememberMe}" />
				    		</label>
				    		<h:commandButton value="#{messages.loginSubmit}"
	 							styleClass="btn" action="#{homeBean.login}">
								<f:param name="redirect" value="#{requestScope['javax.servlet.forward.request_uri']}" />
	 						</h:commandButton>
				    	</div>
				    </div>
 				</h:form>				
			</div>
		</div>

		<hr />

		<footer>
			<p>#{messages.footerText}</p>
		</footer>

	</div>
	<!-- Placed at the end of the document so the pages load faster 	-->
	<script type="text/javascript" src="#{request.contextPath}/resources/js/jquery.js"></script>	
	<script type="text/javascript" src="#{request.contextPath}/resources/js/bootstrap-transition.js"></script>
	<script type="text/javascript" src="#{request.contextPath}/resources/js/bootstrap-alert.js"></script>
	<script type="text/javascript" src="#{request.contextPath}/resources/js/bootstrap-modal.js"></script>
	<script type="text/javascript" src="#{request.contextPath}/resources/js/bootstrap-dropdown.js"></script>
	<script type="text/javascript" src="#{request.contextPath}/resources/js/bootstrap-scrollspy.js"></script>
	<script type="text/javascript" src="#{request.contextPath}/resources/js/bootstrap-tab.js"></script>
	<script type="text/javascript" src="#{request.contextPath}/resources/js/bootstrap-tooltip.js"></script>
	<script type="text/javascript" src="#{request.contextPath}/resources/js/bootstrap-popover.js"></script>
	<script type="text/javascript" src="#{request.contextPath}/resources/js/bootstrap-button.js"></script>
	<script type="text/javascript" src="#{request.contextPath}/resources/js/bootstrap-collapse.js"></script>
	<script type="text/javascript" src="#{request.contextPath}/resources/js/bootstrap-carousel.js"></script>
	<script type="text/javascript" src="#{request.contextPath}/resources/js/bootstrap-typeahead.js"></script>
</h:body>
</html>